<template>
  <div class="labour-container" ref="container" :class="theme">
    <div class="top">
      <dv-box title="人员出勤率">
        <div class="statistics">
          <div>
            <div>
              <h6>今日出勤数据</h6>
              <span>{{personTotal.attendance}} <i>人</i></span>
            </div>
            <div>
              <h6>出勤率</h6>
              <span>{{attendanceRate > 100 ? 100 : attendanceRate}} <i>%</i></span>
            </div>
          </div>
          <div>
            <div>
              <h6>刷卡异常数据</h6>
              <span>{{personTotal.abnormal}} <i>人</i></span>
            </div>
            <div>
              <h6>实名制总数</h6>
              <span>{{personTotal.total}} <i>人</i></span>
            </div>
          </div>
        </div>
      </dv-box>
      <dv-box title="劳务分包概览">
        <div class="overflow">
          <Echart
            id="overflow"
            :options="deptOptions"
            height="100%"
            width="100%"
          ></Echart>
        </div>
      </dv-box>
      <dv-box title="班组人员统计">
        <div class="team">
          <Echart
            id="team"
            :options="teamOptions"
            height="100%"
            width="100%"
          ></Echart>
        </div>
        
      </dv-box>
    </div>
    <div class="bottom">
      <dv-box title="实时人员动态">
        <div class="active">
          <dv-scroll-board :config="activeTableConfig" />
        </div>
      </dv-box>
      <dv-box title="异常人员分析">
        <div class="analyse">
          <dv-scroll-board :config="absenceTableConfig" />
        </div>
      </dv-box>
    </div>
  </div>
</template>

<script>
import dvBox from "@/components/datav/dv-box.vue";
import Echart from "@/components/echart";
import moment from "moment";
import {mapGetters} from "vuex";

export default {
  components: {
    dvBox,
    Echart
  },
  data(){
    return {
      personTotal: {
        attendance: 0,
        abnormal: 0,
        total: 0
      },
      deptData: [],
      deptTotal: 0,
      absenceTableData: [],
      activeTableData: [],
      teamAxis: [],
      contentHeight: 0,
      contentWidth: 0,
      rowNum: 0,
      teamSeries: [
        {
          type: 'bar',
          name: '出勤人数',
          index: 0,
          color: ['#9B9CB3','#9B9CB3'],
          data: []
        },
        {
          type: 'bar',
          name: '总人数',
          index: 0,
          color: ['#0B7EFF','#0B7EFF'],
          data: [],
        },
        {
          type: 'line',
          name: '出勤率',
          index: 1,
          color: ['#FE9811','#FE9811'],
          data: [],
        }
      ],
    }
  },
  async mounted() {
    this.initData()
    const resizeObserver = new ResizeObserver((res) => {
      //this.contentHeight = res[0].contentRect.height / 2 - 100;
      this.contentWidth = res[0].contentRect.width;
      //this.rowNum = Math.round(this.contentHeight / 50)
    });
    resizeObserver.observe(this.$refs.container);
    this.$once('hook:beforeDestroy', () => {
      resizeObserver.disconnect();
    });
  },
  computed: {
    ...mapGetters(["theme"]),
    tableStyle(){
      return {
        height: this.contentHeight + 'px'
      }
    },
    projId(){
      return this.$route.query.id
    },
    attendanceRate(){
      if(!this.personTotal.total) {
        return '0.00'
      }
      return ((this.personTotal.attendance)
        / (this.personTotal.total) * 100).toFixed(2)
    },
    absenceTableConfig(){
      return {
        header: ['姓名', '班组', '单位名称','异常类型', '次数'],
        index: true,
        rowNum: 6,
        headerHeight:40,
        columnWidth:[
          50,
          this.contentWidth / 11,
          this.contentWidth / 11,
          this.contentWidth / 11,
          this.contentWidth / 11,
          this.contentWidth / 11,
        ],
        headerBGC:'#F2F3F5',
        oddRowBGC:'rgba(0,0,0,0)',
        evenRowBGC:'rgba(0,0,0,0)',
        data: this.absenceTableData
      }
    },
    activeTableConfig(){
      return {
        header: ['姓名', '班组', '时间', '进出闸'],
        index: true,
        rowNum: 6,
        headerHeight:40,
        columnWidth:[
          50,
          this.contentWidth / 7,
          this.contentWidth / 7,
          this.contentWidth / 7,
          this.contentWidth / 7,
        ],
        headerBGC:'#F2F3F5',
        oddRowBGC:'rgba(0,0,0,0)',
        evenRowBGC:'rgba(0,0,0,0)',
        data: this.activeTableData
      }
    },
    deptOptions() {
      return {
        title: {
          text: this.deptTotal,
          subtext: '总人数',
          left: '24%',
          top: '38%',
          itemGap: 0,
          textAlign: 'center',
          textStyle: {
            color: '#000',
            fontSize: 35,
            lineHeight: 46,
            fontWeight: 'bold',
          },
          subtextStyle: {
            color: '#000',
            fontSize: 12,
            lineHeight: 16,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: true,
          type: 'scroll',
          top: 0,
          right: 0,
          icon: 'circle',
          width: '100px',
          itemWidth: 8,
          itemGap: 16,
          orient: 'vertical',
          pageIconColor: '#409EFF',
          pageIconSize: 14,
          textStyle: {
            color: '#000',
            fontSize: 14,
            fontWeight: 400,
            fontFamily: 'MicrosoftYaHei',
            padding: [6,10],
            backgroundColor: '#EDEDF2',
            width: this.contentWidth / 8,
            overflow: 'truncate'
          },
          formatter: val => {
            return val + ' '.repeat(4) + this.deptData.find(item=>item.name === val)?.value ?? 0
          }
        },
        series: [
          {
            left: '-50%',
            type: 'pie',
            radius: ['45%', '60%'],
            label: {
              show: false
            },
            labelLine: {
              show: true,
              length: 20,
              length2 : 50
            },
            data: this.deptData
          }
        ]
      }
    },
    teamOptions() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: val=>{
            return `
              <div>${val[0].name}<div>
              <div>
                <i>${val[0].marker}</i>
                <span>${val[0].seriesName}</span>
                <span style="padding-left: 20px;font-weight: bold">${val[0].value} 人</span>
              <div>
              <div>
                <i>${val[1].marker}</i>
                <span>${val[1].seriesName}</span>
                <span style="padding-left: 20px;font-weight: bold">${val[1].value} 人</span>
              <div>
              <div>
                <i>${val[2].marker}</i>
                <span>${val[2].seriesName}</span>
                <span style="padding-left: 20px;font-weight: bold">${val[2].value} %</span>
              <div>
            `
          }
        },
        grid: {
          top: 30,
          bottom: 30,
          right: 40,
          left: 40
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 12,
            color: '#000'
          },
          data: this.teamAxis,
        },
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false
            },
            axisLabel: {
              margin: 12,
              color: '#000'
            },
          },
          {
            type: 'value',
            max: 100,
            axisLine: {
              show: false
            },
            axisLabel: {
              margin: 12,
              color: '#000'
            },
          }
        ],
        series: this.teamSeries.map(item=>{
          return {
            type: item.type,
            data: item.data,
            name: item.name,
            yAxisIndex: item.index,
            smooth: true,
            barMaxWidth: 6,
            barGap: 2,
            label: {
              show: false
            },
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: item.color[0]
                  },
                  {
                    offset: 1,
                    color: item.color[1]
                  }
                ]}
            }
          }
        })
      }
    }
  },
  methods: {
    initData(){
      this.$api.getPersonTotal({
        projectid: this.projId,
        today: moment().format('YYYY-MM-DD')
      }).then(res=>{
        const [data] =res.data;
        this.personTotal.attendance = data?.attendancenum ?? 0
        this.personTotal.total = data?.total ?? 0
      })
      this.$api.getPersonDept({
        projectid: this.projId,
      }).then(res=>{
        this.deptData = res.data.map(item=>{
          return {
            name: item.org,
            value: item.num
          }
        }).sort((a,b)=>b.value-a.value)
        this.deptTotal = res.data.reduce((prev,next)=>prev + parseInt(next.num),0)
      })
      this.$api.getPersonAbsence({
        projectid: this.projId,
        start: moment().format('YYYY-MM-DD'),
        end: moment().format('YYYY-MM-DD')
      }).then(res=>{
        this.personTotal.abnormal = res.data.total
        res.data.records.forEach(item=>{
          const arr = [
            {
              name: '越闸',
              value: item.over_gate
            },
            {
              name: '代人刷卡',
              value: item.replace_card
            }
          ].filter(item=>item.value)
          const overGate = arr.map(item=>item.name).join(',')
          const replaceCard = arr.map(item=>item.value).join(',')
          this.absenceTableData.push([
            item.workname,
            item.team,
            item.org,
            overGate,
            replaceCard
          ])
        })
      })
      this.$api.getPersonActive({
        projectid: this.projId,
        today: moment().format('YYYY-MM-DD')
      }).then(res=>{
        res.data.records.forEach(item=>{
          this.activeTableData.push([
            item.workname,
            item.team,
            item.cardtime,
            item.typecontent
          ])
        })
      })
      this.$api.getPersonTeam({
        projectid: this.projId,
        start: moment().format('YYYY-MM-DD'),
        end: moment().format('YYYY-MM-DD')
      }).then(res=>{
        res.data.forEach(item=>{
          this.teamAxis.push(item.team);
          const attencance = item.fenzi
          const total = item.fenmu
          const rate = !item.fenmu ? '0.00' :  ((attencance) / (total) * 100).toFixed(2)
          this.teamSeries[0].data.push(attencance)
          this.teamSeries[1].data.push(total)
          this.teamSeries[2].data.push(rate >= 100 ? 100 : rate)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.labour-container {
  height: 100%;
  width: calc(100vw - 40px);
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: repeat(2, 1fr);
  grid-row-gap: 24px;
  overflow: hidden;

  > .top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100%;
    grid-column-gap: 20px;
    height: 100%;
    min-height: 370px;
  }

  > .bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 100%;
    grid-column-gap: 20px;
    height: 100%;
    min-height: 386px;
  }

  .statistics {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;

    > div {
      display: flex;
      height: 40%;

      > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      &:nth-child(1) {
        > div {
          &:before {
            background-color: #FE9811;
          }
          span {
            color: #FE9811;
          }
        }
      }

      &:nth-child(2) {
        > div {
          &:before {
            background-color: #0374FE;
          }
          span {
            color: #0374FE;
          }
        }
      }

      > div {
        padding: 10px 26px 10px;
        flex: 1;
        display: flex;
        height: 100%;
        box-sizing: border-box;
        flex-direction: column;
        background-image: url("../../../../assets/images/data_bg.png");
        background-size: 100% 100%;
        position: relative;
        margin-left: 10px;
        margin-right: 15px;

        &:before {
          content: '';
          position: absolute;
          left: -10px;
          top: 0;
          width: 5px;
          height: 100%;
        }

        h6 {
          font-size: 16px;
          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
          font-weight: 400;
          color: #333333;
          line-height: 24px;
          margin: 0 0 10px 0;
          white-space: nowrap;
        }

        span {
          font-size: 30px;
          font-family: YouSheBiaoTiHei;
          line-height: 33px;
          font-weight: normal;
          white-space: nowrap;

          i{
            font-size: 20px;
            font-style: normal;
          }
        }
      }
    }
  }
}
.overflow,.analyse,.active,.team{
  height: 100%;
}
@include dvScroll
</style>